<template>
  <el-card>
    <template #header>销售数据</template>
    <div class="all-chart02">
      <div class="left-chart02">
        <!-- <div ref="main" style="width: 600px; height: 400px"></div> -->

        <!-- 如果都是驼峰命名法，就可以用以下的方式写 -->
        <h3>销售数据周对比</h3>
        <LineChart02 />
      </div>
      <div class="right-chart02">
        <h3>饼图示例</h3>
        <PieChart02 />
      </div>
    </div>
  </el-card>
</template>

<script>
import LineChart02 from './components/LineChart02.vue'
import PieChart02 from './components/PieChart02.vue'

export default {
  components: {
    LineChart02,
    PieChart02
  }
}
</script>

<style lang="less" scoped>
.all-chart02 {
  display: flex;
  justify-content: space-between;
  .left-chart02 {
    flex: 0 0 55%;
    padding: 20px 0 0 0;
    h3 {
      text-align: center;
    }
  }
  .right-chart02 {
    flex: 0 0 40%;
    padding: 20px 0 0 0;
    h3 {
      text-align: center;
    }
  }
}
</style>
